<template>
  <div class="main_friend_left_apply">
    <div class="main_friend_left_apply_for">
      <div v-for="(item,index) in friendApplyList" :key="item.id">
        <div class="main_friend_left_apply_for_item" v-if="item.user!=null">
          <img class="main_friend_left_apply_for_item_avatar" :src="item.user.avatar" alt="头像">
          <div>
            <div class="main_friend_left_apply_for_item_nickname">{{ item.user.nickname }}</div>
            <div class="main_friend_left_apply_for_item_introduction">{{ item.user.introduction }}</div>
          </div>
          <div class="main_friend_left_apply_for_item_button" v-if="item.type==='0'">
            <div class="main_friend_left_apply_for_item_button_item">
              <a-button @click="handleAgreeOrRejectFriendApply(item.user?.id,'1',index)" type="primary">同意</a-button>
            </div>
            <div class="main_friend_left_apply_for_item_button_item">
              <a-button @click="handleAgreeOrRejectFriendApply(item.user?.id,'2',index)" type="primary" danger>拒绝
              </a-button>
            </div>
          </div>
          <div class="main_friend_left_apply_for_item_button" v-else-if="item.type==='1'">
            <a-button class="main_friend_left_apply_for_item_button_item" type="primary" ghost>已同意</a-button>
          </div>
          <div class="main_friend_left_apply_for_item_button" v-else-if="item.type==='2'">
            <a-button class="main_friend_left_apply_for_item_button_item" danger>已拒绝</a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
// @ts-ignore
import cookie from 'js-cookie'
import {agreeOrRejectFriendApply, getUserFriendApplyList} from "@/api/personalCenter/myFriends";

//好友申请列表
const friendApplyList = ref()

//用户id
const userId = ref<number>(0)

//当前用户同意或拒绝好友申请
const handleAgreeOrRejectFriendApply = (friendId: number, type: string, index: number) => {
  agreeOrRejectFriendApply(userId.value, friendId, type).then(() => {
    friendApplyList.value[index].type = type
  })
}

//获取当前用户的好友申请列表
const handleUserFriendApplyList = () => {
  getUserFriendApplyList(userId.value).then((res) => {
    friendApplyList.value = res.data.data.list
  })
}

//从cookie中获取用户信息
const getUserinfo = async () => {
  userId.value = await JSON.parse(cookie.get('userinfo')).id
  handleUserFriendApplyList()
}

getUserinfo()
</script>

<style lang="less" scoped>
.main_friend_left_apply {
  .main_friend_left_apply_for {
    .main_friend_left_apply_for_item {
      display: flex;
      margin-bottom: 5px;
      border-bottom: 1px solid white;

      .main_friend_left_apply_for_item_avatar {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        padding: 5px;
      }

      .main_friend_left_apply_for_item_nickname {
        margin-top: 10px;
      }

      .main_friend_left_apply_for_item_introduction {
        width: 170px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: 10px;
      }

      .main_friend_left_apply_for_item_button {
        margin-left: auto;

        .main_friend_left_apply_for_item_button_item {
          margin-top: 2px;
          margin-right: 2px;
        }
      }
    }
  }
}
</style>